<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" href="../dist/vux.css">
    <script src="vue.1.0.26.js"></script>
    <style>
      .m-img {
        padding-bottom: 33%;
        display: block;
        position: relative;
        max-width: 100%;
        background-size: cover;
        background-position: center center;
        cursor: pointer;
        border-radius: 2px;
      }
      .m-time {
        font-size: 12px;
        padding-top: 4px;
        border-top: 1px solid #f0f0f0;
        display: inline-block;
        margin-top: 5px;
      }
      .m-title {
        color: #fff;
        text-align: center;
        text-shadow: 0 0 2px rgba(0,0,0,.5);
        font-weight: 500;
        font-size: 16px;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
      }
    </style>
  </head>
  <body>
    <div id="demo">
      <div>
        <div style="margin: 10px;overflow: hidden;" v-for="item in list">
          <masker style="border-radius: 2px;" :opacity="0.5">
          <div class="m-img" :style="{backgroundImage: 'url(' + item.img + ')'}"></div>
          <div slot="content" class="m-title"><br/>
            {{item.title}}
            <br/>
            <span class="m-time">2016-03-18</span>
          </div>
          </masker>
        </div>
        <div style="margin: 10px;overflow: hidden;">
          <masker style="border-radius: 2px;" color="F9C90C" :opacity="0.6">
          <div class="m-img" style="background-image:url(https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg)"></div>
          <div slot="content" class="m-title">
            VUX
            <br/>
            <span class="m-time">2016-03-18</span>
          </div>
          </masker>
        </div>
      </div>
    </div>

    <script src="../dist/components/masker/index.js"></script>

    <script>
    Vue.component('masker', vuxMasker)
    new Vue({
      el: '#demo',
      data:{
        list: [{
          title: '洗颜新潮流！人气洁面皂排行榜',
          img: 'https://cdn.xiaotaojiang.com/uploads/82/1572ec37969ee263735262dc017975/_.jpg'
        }, {
          title: '美容用品 & 日用品（上）',
          img: 'https://cdn.xiaotaojiang.com/uploads/59/b22e0e62363a4a652f28630b3233b9/_.jpg'
        }, {
          title: '远离车内毒气，日本车载空气净化器精选',
          img: 'https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg'
        }]
      }
    })
    </script>
  </body>
</html>
